<template>
<div>
  <div style="margin:20px 0;display:flex; justify-content: center">
    <div style="margin-top:5%">Pleasure</div>
  </div>
  <el-row :gutter="20">
  <el-col :span="6">
      <div class="grid-content bg-purple"  @click="goGuess">
        <div class="el-icon-menu" style="font-size:30px"></div>
        <p>猜数字</p>
      </div>
  </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple"  @click="goDailyEnglish">
        <div class="el-icon-s-claim" style="font-size:30px"></div>
        <p>每日一句</p>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple" @click="goTodayInHistory">
        <div class="el-icon-info" style="font-size:30px"></div>
        <p>历史上的今天</p>
      </div>
    </el-col>
    <el-col :span="6"><div class="grid-content bg-purple">4</div></el-col>
  </el-row>
  <p style="padding:30px 0">如有好建议，可私信邮箱：<b>2698056011@qq.com</b></p>
</div>
</template>

<script>
export default {
  name: 'index',
  methods:{
      goGuess(){
          this.$router.push('/GuessNumber');
      },
      goDailyEnglish(){
          this.$router.push('/DailyEnglish');
      },
       goTodayInHistory(){
          this.$router.push('/TodayInHistory');
      }
  }
}
</script>
<style scoped>
    *{
      margin: 0;
      padding: 0;
    }
     .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
